<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>响应式设计</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        h3{
            width: 960px;
            height: 80px;
            background: #cccccc;
            color: white;
            text-align: center;
            line-height: 80px;
            margin: 30px auto;
        }
        #banner{
            width: 960px;
            margin: 0 auto;
        }
        #banner img{
            width: 960px;
        }
        #content{
            width: 960px;
            margin: 0 auto;
        }
        #left{
            width: 600px;
            margin-right: 30px;
            background: #ff0000;
        }
        #right{
            width: 330px;
            background: #457354;
        }
         #right,#left{
             float: left;
             height: 300px;
             text-align: center;
             display: table;

         }
         #left p,#right p{
             display: table-cell;
             vertical-align: middle;
         }
        #footer{
            clear: both;
        }
        @media (max-width: 959px) {
              h3{
                  width: 100%;
              }
            #content{
                width: 100%;
            }
            #right{
                width: 40%;
            }
            #left{
                margin-right: 3%;
                width: 57%;
            }
            #banner{
                width: 100%;
            }
            #banner img{
                width: 100%;
            }
            @media (max-width: 479px) {

                #left,#right{
                   width: 100%;
 }           }
        }
    </style>
</head>
<body>
<div id="header">
    <h3>页头</h3>
</div>
<div id="nav">
    <h3>导航</h3>
</div>
<div id="banner">
    <img src="imgs/01.jpg" alt="">
</div>
<div id="content">
<div id="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</p>
</div>
<div id="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</p>
</div>
</div>
<div id="footer">
    <h3>页脚</h3>
</div>
</body>
</html>